<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>JVM监控</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/monitor.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<blockquote class="layui-elem-quote layui-text font16" id="ipAndHost">
</blockquote>
<div class="layui-fluid">
    <div class="layui-row height50">
        <div class="layui-col-sm6">
            <fieldset class="layui-elem-field height50">
                <legend>系统信息</legend>
                <div class="layui-field-box">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">操作系统</label>
                            <div class="layui-input-block">
                                <span id="osName" class="layui-input line-height38"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">系统版本</label>
                            <div class="layui-input-block">
                              <span id="osVersion" class="layui-input line-height38"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">JAVA版本</label>
                            <div class="layui-input-block">
                                <span id="javaVersion" class="layui-input line-height38"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">安装目录</label>
                            <div class="layui-input-block">
                                <span id="javaHome" class="layui-input line-height38"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">CPU(核心数)</label>
                            <div class="layui-input-block">
                                <span id="processors" class="layui-input line-height38"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">系统负载</label>
                            <div class="layui-input-block">
                                <span id="systemload" class="layui-input line-height38"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label wd90">启动时间(ms)</label>
                            <div class="layui-input-block">
                                <span id="uptime" class="layui-input line-height38 text-left"></span>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
        <div class="layui-col-sm6">
            <fieldset class="layui-elem-field height50">
                <legend>线程信息</legend>
                <div class="layui-field-box">
                    <table class="layui-hide height50" id="threadInfo" lay-even="" lay-skin="nob"></table>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div class="layui-fluid">

    <div class="layui-row ">
        <div class="layui-col-sm6">
            <fieldset class="layui-elem-field height50">
                <legend>内存信息</legend>
                <div class="layui-field-box">
                    <table class="layui-hide" id="memoryInfo" lay-even="" lay-skin="nob"></table>
                </div>
            </fieldset>
        </div>
        <div class="layui-col-sm6">
            <fieldset class="layui-elem-field height50">
                <legend>GC信息</legend>
                <div class="layui-field-box">
                    <table class="layui-hide" id="gcInfo" lay-even="" lay-skin="nob"></table>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<script src="js/jquery-3.4.0.min.js" charset="utf-8"></script>
<script src="layui/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript"  >

    var _per50 = null;
    $(function () {
         _per50 = $(document.body).height()/2 - 80;
        $.ajax({
            type: "GET",
            url: "v1/api/monitor/info.json",
            dataType: "json",
            success: function(data){
                // 显示内容
                $("#ipAndHost").html(data.data + $("#toPage").html())
            }
        });
        setInterval(function () {
            // 加载内存信息
            loadMemoryInfo()
            // 加载基本信息
            loadBaseInfo();
            // 线程信息
            loadThreadInfo();
            // 加载Gc信息
            loadGcInfo();
        },1000)

    });

    /**
     * url:请求的地址
     * callback:回调函数
     * */
   function  _ajax(url,callback){
        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            success: function(data){
                if(data.code == 200) {
                    // 显示内容
                    callback(data.data)
                }
            }
        });
    }


    /**
     * 加载系统基本信息
     */
  function  loadBaseInfo() {
  // 请求
    _ajax("v1/api/monitor/baseinfo.json",function(data){
        if(data){
            for(var key in data){
                // 遍历赋值
                $("#" + key).html(data[key]);
            }
        }
    })
  }

    /**
     * 加载表格数据
     */
    function  loadMemoryInfo() {
        // 请求
        _ajax("v1/api/monitor/memory.json",function(data){
            layui.use('table', function(){
                var table = layui.table;
                //展示已知数据
                table.render({
                    elem: '#memoryInfo'
                    ,cols: [[
                        {field: 'heapType', title: '内存类型', width: 160}
                        ,{field: 'name', title: 'JMM', minWidth: 150}
                        ,{field: 'usedStr', title: '已用', minWidth: 160}
                        ,{field: 'totalStr', title: '总内存', width: 160}
                        ,{field: 'maxStr', title: '最大内存', width: 160}
                    ]]
                    ,data: data
                    ,height: _per50
                    ,skin: 'nob'
                    ,even: true
                });
            });
        })
    }

    /**
     * 加载线程信息
     */
    function  loadThreadInfo() {
        // 请求
        _ajax("v1/api/monitor/thread.json",function(data){
            layui.use('table', function(){
                var table = layui.table;
                //展示已知数据
                table.render({
                    elem: '#threadInfo'
                    ,cols: [[
                        {field: 'id', title: 'id',width:60,templet: '#threadIdTpl'}
                        ,{field: 'name', title: 'name' ,minWidth:120}
                        ,{field: 'group', title: 'group',minWidth:120}
                        ,{field: 'priority', title: 'priority'}
                        ,{field: 'state', title: 'state',minWidth:120}
                        ,{field: 'cpu', title: '%cpu'}
                        ,{field: 'time', title: 'time'}
                        ,{field: 'interrupted', title: 'interrupted'}
                        ,{field: 'daemon', title: 'daemon'}
                    ]]
                    ,data: data
                    ,height: _per50
                    ,skin: 'nob'
                    ,even: true
                });
            });
        })
    }

    /**
     * 加载GC信息
     */
    function loadGcInfo() {
        // 请求
        _ajax("v1/api/monitor/gc.json",function(data){
            layui.use('table', function(){
                var table = layui.table;
                //展示已知数据
                table.render({
                    elem: '#gcInfo'
                    ,cols: [[
                        {field: 'name', title: 'name',minWidth:120}
                        ,{field: 'count', title: 'count' ,minWidth:120}
                        ,{field: 'timeName', title: 'timeName',minWidth:120}
                        ,{field: 'time', title: 'time',minWidth:120}
                    ]]
                    ,data: data
                    ,height: _per50
                    ,skin: 'nob'
                    ,even: true
                });
            });
        })
   }
</script>
<script type="text/html" id="threadIdTpl">
    <a href="threadDetail.html?id={{d.id}}" class="layui-table-link" target="_blank">{{d.id}}</a>
</script>
<script type="text/html" id="toPage">
    <div style="display: inline-block">
        <a href="thread/index.html" class="layui-btn" target="_blank">线程视图</a>
        <a href="dump.html" class="layui-btn layui-btn-danger" target="_blank">对象实例</a>
        <a href="gcstat.html" class="layui-btn" target="_blank">虚拟机统计信息</a>
        <a href="monitor.html" class="layui-btn" target="_blank">Monitor配置</a>
    </div>
</script>

</body>
</html>